// sass-lint:disable no-empty-rulesets
@import "../base";
@import "variables";

$stars-color: #FBAE00;
$stars-color-disabled: #C9C9C9;

@include block(star-rating) {
  @include element(header) {
    /* widget header */
  }
  @include element(body) {
    /* wudget footer */
  }
  @include element(list) {
    /* item list */
  }
  @include element(item) {
    /* list item */
    vertical-align: middle;

    @include modifier(active) {
      /* active list item */
      font-weight: bold;
    }
  }
  @include element(star) {
    /* item star */
    display: inline-block;
    width: 1em;
    height: 1em;

    &::before {
      content: '\2605';
      color: $stars-color;
    }

    @include modifier(empty) {
      /* empty star */
      display: inline-block;
      width: 1em;
      height: 1em;

      &::before {
        content: '\2606';
        color: $stars-color;
      }
    }
  }
  @include element(link) {
    /* item link */
    @include modifier(disabled) {
      /* disabled list item */
      @include bem(star-rating, star) {
        &::before {
          color: $stars-color-disabled;
        }
      }
      @include bem(star-rating, star, empty) {
        &::before {
          color: $stars-color-disabled;
        }
      }
    }
  }
  @include element(count) {
    /* item count */
  }
  @include element(footer) {
    /* widget footer */
  }
}
